<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>根据名称高亮区划</title>
	<style>
		html,
		body,
		#viewDiv {
			padding: 0;
			margin: 0;
			height: 100%;
			width: 100%;
		}
	</style>
	<!-- <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" /> -->
	<link rel="stylesheet"
		href="http://localhost:8090/arcgis_js_v420_api/arcgis_js_api/javascript/4.20/esri/css/main.css">
	<!-- <script src="https://js.arcgis.com/4.19/"></script> -->
	<script src="http://localhost:8090/arcgis_js_v420_api/arcgis_js_api/javascript/4.20/init.js"></script>
	<script>
		require(["esri/Map",
			"esri/layers/MapImageLayer",
			"esri/layers/VectorTileLayer",
			"esri/layers/FeatureLayer",
			"esri/views/SceneView",
			"esri/Graphic",
			"esri/layers/GraphicsLayer",
		], (Map, MapImageLayer, VectorTileLayer, FeatureLayer, SceneView, Graphic, GraphicsLayer) => {



			// 加载底图

			const basemapLayer = new MapImageLayer({
				url: 'https://cloud04.qnlm.cn/server/rest/services/qingdao/MapServer',
			});

			const geoLyr = new FeatureLayer({
				url: 'https://cloud04.qnlm.cn/server/rest/services/qingdao/MapServer/2',
				visible: false
			});

			const graphicsLayer = new GraphicsLayer();

			var map = new Map();
			map.add(geoLyr);
			map.add(graphicsLayer);
			map.add(basemapLayer);

			var view = new SceneView({
				container: "viewDiv",
				map: map
			});

			var symbol = {
				type: "polygon-3d",
				symbolLayers: [
					{
						type: "fill",
						material: {
							color: [0, 255, 0],
							opacity: 0.5
						}
					}
				]
			};

			view.when(() => {
				view.goTo(geoLyr.fullExtent);

				var query = geoLyr.createQuery();
				query.outFields = ["*"];
				query.where = " DISTNAME!='平度市' ";
				geoLyr.queryFeatures(query)
					.then(function (result) {
						if (result.features.length) {
							var hitObject = new Graphic({
								geometry: result.features[0].geometry,
								symbol: symbol,
							});
							graphicsLayer.removeAll();
							graphicsLayer.add(hitObject);
						}
					});

			});

		});
	</script>
</head>

<body>
	<div id="viewDiv"></div>
</body>

</html>